<template>
    <div class="container" :style="'height: '+docheight+'px'">
        <leftcont></leftcont>
        <div class="righCont">
            <topcont></topcont>
            <div class="content">
                <div class="setCont">
                    <div class="mainTop" style="margin-top:20px">
                        <div class="mainTitle">新增器材</div>
                    </div>
                    <div class="formCont">
                        <el-form ref="form" label-width="120px">
                            <el-form-item v-if="addInfo.equipment_image" label="器材图片">
                                <defUpImg :propImg="addInfo.equipment_image" @upImgSuccess="getImg"></defUpImg>
                            </el-form-item>
                            <el-form-item label="器材名称">
                                <el-input placeholder="请输入器材名称" v-model="addInfo.equipment_name"></el-input>
                            </el-form-item>
                            <el-form-item label="图号｜代号">
                                <el-input placeholder="请输入图号｜代号" v-model="addInfo.equipment_code"></el-input>
                            </el-form-item>
                            <el-form-item label="负责人">
                                <el-input placeholder="请输入负责人" v-model="addInfo.person"></el-input>
                            </el-form-item>
                            <el-form-item label="联系电话">
                                <el-input placeholder="请输入联系电话" v-model="addInfo.mobile"></el-input>
                            </el-form-item>
                            <el-form-item label="器材规格">
                                <el-input placeholder="请输入器材规格" v-model="addInfo.equipment_rule"></el-input>
                            </el-form-item>
                            <el-form-item label="器材分类">
                                <el-select style="width: 100%;" v-model="addInfo.equipment_cate" placeholder="请选择器材分类">
                                    <el-option
                                        v-for="(item,index) in navArr"
                                        :key="index"
                                        :label="item.val"
                                        :value="item.val">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="所在区域">
                              <el-select style="width: 100%;" v-model="addInfo.equipment_region" placeholder="请选择器材库房">
                                  <el-option
                                      v-for="(item,index) in areaArr"
                                      :key="index"
                                      :label="item.val"
                                      :value="item.val">
                                  </el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item label="器材状态">
                                <div style="position: relative;top: 10px;">
                                    <el-radio :disabled="addInfo.equipment_status>=4" v-model="addInfo.equipment_status" :label="1">封存</el-radio>
                                    <el-radio :disabled="addInfo.equipment_status>=4" v-model="addInfo.equipment_status" :label="2">空载</el-radio>
                                    <el-radio :disabled="addInfo.equipment_status>=4" v-model="addInfo.equipment_status" :label="3">在用</el-radio>
                                    <el-radio v-model="addInfo.equipment_status" disabled :label="4">借用</el-radio>
                                    <el-radio v-model="addInfo.equipment_status" disabled :label="5">过期</el-radio>
                                </div>
                            </el-form-item>
                            <el-form-item label="过期时间">
                                <el-date-picker
                                    v-model="endTime"
                                    style="width: 100%;"
                                    type="date"
                                    placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="">
                                <btn value="保存信息" @click="saveFn"></btn>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </template>
  
  <script>
  import leftcont from '@/components/leftCont.vue'
  import topcont from '@/components/topCont.vue'
  import btn from '@/components/public/btn.vue'
  import defUpImg from '@/components/public/defUpImg.vue'

  import { EquipmentAdd,EquipmentShow } from '@/http/api'
    export default {
      components: {defUpImg,leftcont,topcont,btn},
      data() {
        return {
          hotline_mobile:'',
          service_wachat:'',
          showData:false,
          navArr:[
            {val:'吊具工装',id:1},
            {val:'工具',id:2},
            {val:'架车',id:3},
            {val:'托架',id:4},
            {val:'工作梯',id:5},
            {val:'吊带',id:6},
            {val:'温湿度仪器',id:7},
            {val:'灭火器',id:8},
            {val:'消防栓',id:9},
            {val:'产品',id:10},
            ],
            areaArr:[
              {val:'K5',id:1},
              {val:'K6',id:2},
              {val:'K7',id:3},
              {val:'K8',id:4},
              {val:'K9',id:5},
              {val:'K10',id:6},
              {val:'K11',id:7},
            ],
            areaVal:'',
            navVal:"",
            goodsStatus:1,
            endTime:'',
            addInfo:{
              equipment_image:'',
              equipment_name:'',
              equipment_code:'',
              person:'',
              mobile:'',
              equipment_rule:'',
              equipment_cate:'',
              equipment_region:'',
              equipment_status:1,
              expiration_time:'',
            },
        }
      },
      props: {},
      methods:{
        saveFn(){
          var data = this.addInfo
          let date = new Date(this.endTime)
          if(this.endTime!=''){
            let y = date.getFullYear()
            let m = date.getMonth()+1
            let d = date.getDate()
            this.addInfo.expiration_time = y+'-'+m+'-'+d
          }else{
            this.addInfo.expiration_time = '2099-12-30'
          }
          let loading = this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(255, 255, 255, 0.7)'
            });
            EquipmentAdd(data).then((res)=>{
            if(res.data.code==1){
              this.$message({
                message: '录入成功',
                type: 'success'
              });
              setTimeout(() => {
                this.$router.back()
              }, 1000);
            }else{
              this.$message(res.data.msg)
            }
            loading.close()
          }).catch((err)=>{
            loading.close()
            this.$message('服务器请求超时')
          });
        },
        getImg(data){
          this.addInfo.equipment_image = data
        },
        getData(){
            let data  ={
                equipment_id:this.$route.query.id
            }
            EquipmentShow(data).then((res)=>{
            if(res.data.code==1){
                let resData = res.data.data
                this.addInfo = {
                    equipment_id:resData.equipment_id,
                    equipment_image:resData.equipment_image,
                    equipment_name:resData.equipment_name,
                    equipment_code:resData.equipment_code,
                    person:resData.person,
                    mobile:resData.mobile,
                    equipment_rule:resData.equipment_rule,
                    equipment_cate:resData.equipment_cate,
                    equipment_region:resData.equipment_region,
                    equipment_status:resData.equipment_status,
                    expiration_time:resData.expiration_time,
                }
                this.endTime = resData.expiration_time
            }else{
              this.$message(res.data.msg)
            }
            this.showData = true
          }).catch((err)=>{
            this.showData = true
            this.$message('服务器请求超时')
          });
        }
      },
      mounted(){
      },
      created() {
        this.getData()
      },
    }
  </script>
  
  <style scoped lang="less">
  .container{
    width: 100%;
    display: flex;
    overflow: hidden;
    .righCont{
      display: flex;
      flex-direction: column;
      flex: 1;
      margin-left: 15px;
      height: 100%;
      width: 10px;
      background-color: #F4F8FF;
      .content{
        padding: 20px;
        box-sizing: border-box;
        width: 100%;
        flex: 1;
        overflow: auto;
        .setCont{
          width: 100%;
          padding: 20px;
          box-sizing: border-box;
          background-color: #fff;
          .mainTop{
            display: flex;
            margin-bottom: 25px;
            align-items: center;
            justify-content: space-between;
            .mainTitle{
              font-size: 14px;
              font-weight: bold;
            }
          }
          .formCont{
            width: 600px;
          }
        }
      }
    }
}
  </style>
  <style>
    .el-form-item__content{
        line-height: normal;
    }
</style>